

import type Konva from 'konva'

export interface T_KonvRectGraphs {
    x: number;
    y: number;
    width: number;
    height: number;
    fill: string;
    stroke: string;
    strokeWidth: number;
}

export interface T_KonvaCircle {
    x: number;
    y: number;
    radius: number;
    fill: string;
    stroke: string;
    strokeWidth: number;
}

export interface T_KonvaLine {
    points: Array<number>;
    stroke: string;
    strokeWidth: number;
}

export interface T_GraphsConfigItem {
    vueComponentName: 'v-rect' | 'v-text' | 'v-line' | 'v-circle'; // rect  、 skeleton
    konvaGraphConfig:  Konva.RectConfig;
    graphsRect?: Konva.RectConfig;
    graphsRectTitleBg?: Konva.RectConfig;
    graphsRectText?: Konva.TextConfig;
    graphsSkeleton?: {
        keyPoints: Array<{ x: number;y: number;}>;
        circleConfig: Array<Konva.CircleConfig>;
        lineConfig: Array<Konva.LineConfig>;
    },
}

export type T_GraphsConfigItem2 = (
    | {
        vueComponentName: 'v-rect';
        konvaGraphConfig:  Konva.RectConfig;
    }
    | {
        vueComponentName: 'v-text';
        konvaGraphConfig:  Konva.TextConfig;
    }
    | {
        vueComponentName: 'v-line';
        konvaGraphConfig:  Konva.LineConfig;
    }
    | {
        vueComponentName: 'v-circle';
        konvaGraphConfig:  Konva.CircleConfig;
    }
    | {
        vueComponentName: 'v-transformer';
        konvaGraphConfig:  Konva.TransformerConfig;
    }
    | {
        vueComponentName: 'v-group';
        konvaGraphConfig:  Konva.GroupConfig;
    }
)

export type T_KonvaGroupConfig = {
    vueComponentName: 'v-group';
    konvaGraphConfig?:  Konva.GroupConfig;
    GraphsConfigItems:  T_GraphsConfigItem2[];
}
export interface T_GraphsConfig {
    layerNumber?: number;
    graphList: Array<T_GraphsConfigItem2> | null;
}

export type T_GraphsMapConfig = Map<string, {
    isWarning: boolean;
    cameraId: string;
    pipelineId: string;
    graphList: Array<T_GraphsConfigItem2> | null;
}>

export type T_Graphs_Unconverted = {
    width: number;
    height: number;
    top: number;
    left: number;
    frame: {
        width: number;
        height: number;
    }
}

export type T_GraphsOptions = {
    left: number;
    top: number;
    width: number;
    height: number;
    color: string;
    class_id: string;
    class_name?: string;
    /** 矩形框-组内零件标签名称标题 */
    class_name_title?: string;
    strokeWidth?: number;
    /** 矩形框-组内零件位置 top | bottom | undefined */
    position?: string;
    /** 矩形框-组内零件-标签-位置  top | bottom | center */
    uiDirection?: string;
    unconverted?: T_Graphs_Unconverted;
    /**
     * 是否是组内元素
     */
    isGroupPart?: boolean;
}

export type T_GraphsOptionsSet<T=number> = {
    x?: number;
    y?: number;
    w?: number;
    h?: number;
    center? : number;
    color?: string;
    class_id: string;
    class_name?: string;
    strokeWidth?: number;
    points?: Array<T>;
    dash?: Array<number>,
    stroke?: string;
}